import * as echarts from 'echarts'

const colorList = ['#0EBDFF', '#FF6060', '#FF823C']
const areaStyle = [
  {
    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      { offset: 0, color: colorList[0] },
      { offset: 1, color: 'rgba(14, 189, 255, 0)' },
    ]),
  },
  {
    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      { offset: 0, color: colorList[1] },
      { offset: 1, color: 'rgba(255, 96, 96, 0)' },
    ]),
  },
  {
    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      { offset: 0, color: colorList[1] },
      { offset: 1, color: 'rgba(255, 130, 60, 0)' },
    ]),
  },
]
const Radar1Option = ({ data, indicator }) => {
  indicator = indicator
    ? indicator
    : [
        { name: '亩均效应' },
        { name: '固定资产投资' },
        { name: '规上企业增加值' },
        { name: '头部企业' },
        { name: '产业投资' },
      ]
  return {
    legend: {
      top: '1%',
      icon: 'roundRect',
      itemHeight: 7,
      itemWidth: 14,
      width: '80%',
      padding: [0, 20],
      itemGap: 20,
      align: 'right',
      textStyle: {
        color: colorList,
        fontSize: 12,
        height: 10,
        rich: {
          a: {
            verticalAlign: 'bottom',
          },
        },
      },
      formatter: function (params) {
        const provideNumber = 12
        const paramsNameNumber = params.length
        let newParamsName = ''
        if (paramsNameNumber > provideNumber) {
          newParamsName = params.substring(0, provideNumber) + '...'
        } else {
          newParamsName = params
        }
        return newParamsName
      },
      data: data.map((item) => item.name),
    },
    radar: {
      name: {
        textStyle: {
          color: '#206EF2',
          fontSize: 12,
          borderRadius: 3,
          padding: [3, 5],
        },
      },
      indicator: indicator,
      splitNumber: 6,
      triggerEvent: true,
      center: ['50%', '63%'],
      radius: 100,
      nameGap: 5,
      splitLine: {
        lineStyle: {
          color: 'rgba(32, 110, 242, 0.4)',
        },
      },
      splitArea: {
        show: false,
      },
      axisLine: {
        show: false,
      },
    },
    series: [
      {
        type: 'radar',
        areaStyle: {
          opacity: 0.3,
        },
        symbol: 'none',
        data: data.map((item, index) => {
          return {
            name: data[index].name,
            value: data[index].value,
            areaStyle: areaStyle[index],
            symbol: 'none',
            itemStyle: {
              color: colorList[index],
            },
          }
        }),
      },
    ],
  }
}

export { Radar1Option }
